<template>
	<view class="box">
		<u-grid :col="2">
			<u-grid-item bg-color="#fee140">
				<child :istab="istab" style="position: absolute;left: 0;top: 0;"></child>
				<view class="a1">{{itemList[0]}}</view>
				<view class="zi">{{arr.today}}</view>
			</u-grid-item>
			<u-grid-item bg-color="#fdcbf1">
				<child :istab="istab" style="position: absolute;left: 0;top: 0;"></child>
				<view class="a1">{{itemList[1]}}</view>
				<view class="zi">{{arr.week}}</view>
			</u-grid-item>
			<u-grid-item bg-color="#8fd3f4">
				<child :istab="istab" style="position: absolute;left: 0;top: 0;"></child>
				<view class="a1">{{itemList[2]}}</view>
				<view class="zi">{{arr.yearMonth}}</view>
			</u-grid-item>
			<u-grid-item bg-color="#ff9a9e">
				<child :istab="istab" style="position: absolute;left: 0;top: 0;"></child>
				<view class="a1">{{itemList[3]}}</view>
				<view class="zi">{{arr.yearCount}}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	import child from './child/child.vue';
	export default {
		components: {
			child
		},
		data() {
			return {
				istab: true,
				itemList: ["今日火情", "本周火情", "本月火情", "今年火情", ],
				arr: []
			}
		},
		methods: {

		},
		mounted() {
			uni.request({
				url: this.$url + '/mobile/fireSum',
				method: 'POST',
				success: (res) => {
					let data = res.data.data;
					if (data != undefined) {
						this.arr = data
						console.log("火情统计信息", this.arr)
					} else {
						console.log("未能得到火情信息")
					}
				}
			})
		},

	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: $module-margin-bottom;
	}

	.a1 {
		margin-bottom: 10px;
		color: #FFFFFF;
		font-size: 21px;
	}

	.zi {
		font-size: 20px;
		color: #FFFFFF;
	}
</style>
